'use client'

import {
  Box,
  Button,
  VStack,
  Heading,
  Container,
  SimpleGrid,
  useToast
} from '@chakra-ui/react'
import { useState } from 'react'
import { ModalsProvider, useModals } from '@/providers/ModalsProvider'
import { ModalManager } from '@/components/modals/ModalManager'
import { ProjectType } from '@/components/modals/NewProjectModal'

// 包装组件，用于访问ModalsContext
const ModalsDemoContent = () => {
  const modals = useModals()
  const toast = useToast()
  
  // 用于演示的数据
  const sampleSettings = {
    theme: 'light' as const,
    fontSize: 18,
    fontFamily: 'Georgia',
    aiModel: 'gpt-4',
    autoSave: true,
    saveInterval: 60
  }
  
  const sampleAttachment = {
    id: '1',
    name: '示例角色',
    type: 'character',
    content: JSON.stringify({
      name: '艾莉亚·史塔克',
      age: 18,
      gender: '女',
      avatar: 'https://placekitten.com/200/200',
      description: '一个坚强、独立且有着不屈意志的女孩。她的经历让她变得坚韧，但内心仍保持着对公正的追求。',
      background: '出身于北境的贵族家庭，失去了大部分家人后踏上了复仇之路。她经历了许多磨难，学会了变换面孔的技巧，成为了一名致命的刺客。',
      traits: [
        { name: '战斗技能', value: '精通剑术和暗杀技巧' },
        { name: '性格', value: '倔强、独立、坚韧' },
        { name: '特点', value: '善于伪装和适应环境' }
      ]
    }),
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
  
  const handleCreateProject = (title: string, description: string, type: ProjectType) => {
    toast({
      title: '项目已创建',
      description: `标题: ${title}, 类型: ${type}`,
      status: 'success',
      duration: 3000,
      position: 'top'
    })
  }
  
  const handleCreateChapter = (projectId: string, title: string, order: number) => {
    toast({
      title: '章节已创建',
      description: `项目ID: ${projectId}, 标题: ${title}, 序号: ${order}`,
      status: 'success',
      duration: 3000,
      position: 'top'
    })
  }
  
  const handleSaveSettings = (settings: any) => {
    toast({
      title: '设置已保存',
      description: `字体大小: ${settings.fontSize}, 主题: ${settings.theme}`,
      status: 'success',
      duration: 3000,
      position: 'top'
    })
  }
  
  const handleDeleteConfirm = () => {
    toast({
      title: '项目已删除',
      status: 'info',
      duration: 3000,
      position: 'top'
    })
  }
  
  const handleEditAttachment = (attachment: any) => {
    toast({
      title: '正在编辑附件',
      description: `附件名称: ${attachment.name}`,
      status: 'info',
      duration: 3000,
      position: 'top'
    })
  }
  
  return (
    <Container maxW="container.lg" py={10}>
      <Heading as="h1" mb={6} textAlign="center">模态框组件示例</Heading>
      
      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
        <Button 
          colorScheme="red" 
          onClick={() => modals.openNewProject({
            onCreateProject: handleCreateProject
          })}
        >
          打开新建项目对话框
        </Button>
        
        <Button 
          colorScheme="blue" 
          onClick={() => modals.openNewChapter({
            projectId: '123',
            lastChapterNumber: 5,
            onCreateChapter: handleCreateChapter
          })}
        >
          打开新建章节对话框
        </Button>
        
        <Button 
          colorScheme="green" 
          onClick={() => modals.openSettings({
            initialSettings: sampleSettings,
            onSaveSettings: handleSaveSettings
          })}
        >
          打开设置面板
        </Button>
        
        <Button 
          colorScheme="yellow" 
          onClick={() => modals.openConfirmation({
            title: '确认删除',
            message: '您确定要删除这个项目吗？此操作无法撤销。',
            onConfirm: handleDeleteConfirm,
            isDangerous: true
          })}
        >
          打开确认对话框
        </Button>
        
        <Button 
          colorScheme="purple" 
          onClick={() => modals.openAttachmentPreview({
            attachment: sampleAttachment,
            onEdit: handleEditAttachment
          })}
        >
          打开附件预览模态框
        </Button>
      </SimpleGrid>
    </Container>
  )
}

// 主页面组件
export default function ModalsDemo() {
  return (
    <ModalsProvider>
      <ModalManager>
        <ModalsDemoContent />
      </ModalManager>
    </ModalsProvider>
  )
}
